<template>
	<div>
		<ul
		  v-infinite-scroll="loadMore"
		  infinite-scroll-disabled="loading"
		  infinite-scroll-distance="10" class="news_list">
		  <li v-for="item in list">{{ item.title }}</li>
		</ul>
		
	</div>
</template>
<script>
	import VueEvent from '../model/VueEvent.js';
	export default{
		data(){
			return {
				list:[],
				page:1,
				loading:false
			}
		},
		methods:{
			loadMore() {
			 	this.requestData();
			},
			requestData(){
				this.loading = true;
				var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
				
				this.$http.get(api).then((response)=>{
					
					this.list=this.list.concat(response.body.result);
					this.page=this.page+1;
					
                        //判断最后一页是否有数据
                        if(response.body.result.length<20){
                            
                                this.loading=true;     /*终止请求*/
                        }else{
                                this.loading=false;     /*继续请求*/
                        }
					
				},(err)=>{
					console.log(err);
				});
			}
		}
		
		
	}
	
</script>
<style lang="scss">
	
	.news_list{
		padding-left:2rem;
		li{
			height:3rem;
			line-height: 3rem;
			a{
				color:#666;
				text-decoration: none;
			}
		}
	}
</style>